<div class="wukong">
    <div class="header">

        <h2 class="pull-left" style="width: 200px;padding: 0 10px;">聊天</h2>
        <button title="关闭" data-role="close_chat" type="button" class="close_btn" style="color: #333;">×</button>


    </div>
    <div class="myInfo pull-left" style="width: 100%">
        <div class="pull-left">
            <img class="avatar-img" src="{$myInfo.avatar64}">
        </div>
        <div class="pull-left" style="margin-left: 10px;width: 190px;">
            <p>{$myInfo.nickname}</p>

            <p class="text-ellipsis text-muted">{$myInfo.signature}</p>
        </div>


    </div>

    <div class="chat_tabs pull-left " style="width: 100%;padding: 5px 10px;">
        <a title="历史记录" class="active" data-role="wk_change_tab" data-tab="#chat_body" href="javascript:"><i
                class="icon-history "></i> 会话</a>
        <php>if(count($friends) > 0){</php>

        <a title="好友列表" data-role="wk_change_tab" data-tab="#friend_body" href="javascript:"><i
                class="icon-user"></i> 好友</a>

        <php>}</php>


    </div>
    <div class="body pull-left" id="chat_body" style=""></div>
    <php>if(count($friends) > 0){</php>
    <div class="body pull-left" id="friend_body" style="display: none;">

        <volist name="friends" id="user">

            <php>if($user['uid']){</php>
            <a class="chat_s pull-left" data-role="create_conv" data-uid="{$user.uid}" href="javascript:">
                <div class="chat pull-left" id="chat_{$user.uid}">
                    <div class="pull-left">
                        <img class="avatar-img" style="width: 45px;" src="{$user.avatar64}">
                    </div>
                    <div class="pull-left" style="width: 145px;margin-left:10px; ">
                        <p>{$user.nickname}</p>

                        <p class="text-more" style="width: 100%;color: #999;">{$user.signature}</p>
                    </div>

                </div>
            </a>
            <script>
                sessionStorage['user_info_{$user.uid}'] = JSON.stringify({$user | json_encode})
            </script>
            <php>}</php>
        </volist>
    </div>
    <php>}</php>
</div>


<div class="wk_chat" id="message_list" style="display: none">
    <div class="header">
        <h2 class="pull-left" style="width: 600px;padding: 0 10px;"></h2>
        <button title="关闭" data-role="close_message" type="button" class="close_btn" style="color: #333;">×</button>
    </div>

    <div class="body pull-left" id="message_body">

    </div>

    <div class="weibo_post_box input_frame pull-left" id="input_frame" style="width: 100%;">
        <div class="" style="padding: 2px 10px;border-bottom: 1px solid #ccc">


            <a href="javascript:" onclick="wk_insertFace($(this))">
                <img class="" src="__ROOT__/Application/Core/Static/images/bq.png" style="margin: 0px 0 0 10px;"/>
            </a>


            <div id="emot_content" class="emot_content"
                 style="margin-top: -287px;position: absolute;margin-left: 4px"></div>
        </div>
        <div>
            <textarea class="input_textarea" name="send_wk_message" style=""></textarea>
        </div>

        <div>
            <a class="send_btn pull-right" data-role="send_message" href="javascript:">发送</a>
        </div>
    </div>
</div>


<script id="my_friend_list" type="text/html">

    <a class="chat_s pull-left" data-role="create_conv" data-uid="{{user.uid}}" href="javascript:">
        <div class="chat pull-left" id="chat_{{user.uid}}">
            <div class="pull-left">
                <img class="avatar-img" style="width: 45px;" src="{{user.avatar64}}">
            </div>
            <div class="pull-left" style="width: 145px;margin-left:10px; ">
                <p>{{user.nickname}}</p>

                <p class="text-more" style="width: 100%;color: #999;">{{user.signature}}</p>
            </div>

        </div>
    </a>


</script>


<script id="my_chat_list" type="text/html">
    <a class="chat_s pull-left" data-role="create_conv" data-uid="{{user.uid}}" href="javascript:">
        <div class="chat pull-left" id="chat_{{user.uid}}">
            <div class="pull-left">
                <img class="avatar-img" style="width: 45px;" src="{{user.avatar64}}">
            </div>
            <div class="pull-left" style="width: 145px;margin-left:10px; ">
                <p>{{user.nickname}}</p>

                <p class="text-more message_content" style="width: 100%;color: #999;">
                    {{lastMessages[0].baseMessage.content.textContent.text.parseContent()}}
                </p>
            </div>
            <div class="pull-left other">
                <p>{{lastMessages[0].baseMessage.createdAt.toString().time_format_friendly()}}</p>

                <p class="text-center un_read">
                    {{if baseConversation.unreadPoint > 0}}
                    <span class="label label-badge label-danger" style="padding: 3px 5px;">{{baseConversation.unreadPoint}}</span>
                    {{/if}}
                </p>
            </div>
        </div>
    </a>
</script>


<script id="my_message" type="text/html">


    {{if !msg.session_tip}}
    {{msg.updateToRead()}}  <!--设置消息为已读-->
    {{/if}}


    {{if is_me}}

    <li class="time text-center clearfix ">{{msg.baseMessage.createdAt.toString().time_format()}}</li>
    <li class="wk_message " id="wk_msg_{{msg.baseMessage.messageId}}" data-id="{{msg.baseMessage.messageId}}">
        <div class="pull-right" style="margin-right: 20px;">
            <div class="avatar pull-right" style="">
                <a target="_blank" href="{{user.space_url}}">
                    <img class="avatar-img" src="{{user.avatar64}}" style="width: 45px;">
                </a>
            </div>

            <div class="content pull-right">
                <div class="arrow"></div>
                <div class="text">{{msg.baseMessage.content.textContent.text.parseContent()}}</div>
            </div>

            <div class="un_read pull-right">
                <a href="javascript:"> {{msg.senderMessageStatus.unReadCount}}人未读</a>
            </div>
        </div>
    </li>
    {{else}}

    <li class="time text-center clearfix ">{{msg.baseMessage.createdAt.toString().time_format()}}</li>
    <li class="wk_message " id="wk_msg_{{msg.baseMessage.messageId}}" data-id="{{msg.baseMessage.messageId}}">
        <div class="pull-left" style="margin-left: 20px;">
            <div class="avatar pull-left" style="">
                <a target="_blank" href="{{user.space_url}}">
                    <img class="avatar-img" src="{{user.avatar64}}" style="width: 45px;">
                </a>
            </div>
            <div class="content-left pull-left" style="margin:0 0 0 20px;">
                <div class="arrow-left"></div>
                <div class="text">{{msg.baseMessage.content.textContent.text.parseContent()}}</div>
            </div>
        </div>
    </li>
    {{/if}}

</script>


<script>

    myInfo = {$myInfo_json};

    $(function () {

        template.config('escape', false);

        get_conv_list();

        /*        var friendids = "{$friend_ids}".split(',');
         var data = {};
         for (var i = 0; i < friendids.length; i++) {
         if (typeof get_user_info(friendids[i]) != 'undefined') {
         data.user = get_user_info(friendids[i]);
         var html = template('my_friend_list', data);
         $('#friend_body').append(html);
         }
         }*/


        $('[data-role="send_message"]').click(function () {
            var $this = $(this);
            var $text = $this.parents('#input_frame').find('textarea')

            var txt = $text.val();
            if (txt.replace(/(\n)+|(\r\n)+/g, "") != '') {
                wk_message.sendText(txt, function (res) {
                    $text.val('');
                });
            }
        });

        $('[name="send_wk_message"]').keypress(function (e) {
            /*    if (e.ctrlKey && e.which == 13 || e.which == 10) {
             $('[data-role="send_message"]').click();
             }*/
            if (e.which == 13 || e.which == 10) {
                e.preventDefault()
                $('[data-role="send_message"]').click();
            }
        });


        $('[data-role="close_message"]').click(function () {
            $(this).parents('.wk_chat').hide();
            $(this).parents('.wk_chat').find('#message_body').html('');
        });


        $('[data-role="close_chat"]').click(function () {
            var $div = $('#wk_content')
            $div.html('');
            $div.hide();
        })


        $('[data-role="wk_change_tab"]').click(function () {
            var $this = $(this);
            $('.chat_tabs a').removeClass('active');
            $this.addClass('active');
            $('.wukong .body').hide();
            $($this.attr('data-tab')).show();
        })


    })
</script>